@font-face {
  font-family: 'tuniao-xiaowei';
  src: url('https://resource.tuniaokj.com/images/vue3-template/template2-website/font/tuniao-xiaowei.ttf');
}

/* 顶部背景 start */
.top-bg {
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 100vh;
  z-index: -1;
  // background: linear-gradient(rgb(216, 229, 255), rgb(255, 255, 255));
  background-size: 100% auto;
  height: 100vh;
  background-color: rgb(229, 238, 255);
  &::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}
/* 顶部背景 end */

/* 页面内容 start */
.page {
  position: relative;
  width: 100%;
  padding: 0rpx 30rpx;
  padding-bottom: 120rpx;
    
    
    /* 背景阴影 start*/
    .nav-shadow {
      border-radius: 15rpx;
	  color: white;
      // background-color: #FFFFFF;
      box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	  border: 4rpx solid #211E2F;
	  margin: 8rpx 1%;
	  border-radius: 20rpx;
	  background-color: #211E2F;
    }
     
     /* 用户头像 start */
     .nav-image {
       width: 35rpx;
       height: 35rpx;
       position: relative;
       overflow: hidden;
       border-radius: 50%;
     }
     
     .nav-pic {
       background-size: cover;
       background-repeat: no-repeat;
       // background-attachment:fixed;
       background-position: top;
       border: 1rpx solid rgba(255,255,255,0.05);
       box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
       border-radius: 50%;
       overflow: hidden;
       // background-color: #FFFFFF;
     }
   
}
/* 页面内容 end */

   
   /* 用户头像 start */
   .logo-image {
     width: 60rpx;
     height: 60rpx;
     position: relative;
     overflow: hidden;
     border-radius: 50%;
   }
   
   .logo-pic {
     background-size: cover;
     background-repeat: no-repeat;
     // background-attachment:fixed;
     background-position: top;
     border: 1rpx solid #F8F7F8;
     // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
     border-radius: 50%;
     overflow: hidden;
     // background-color: #FFFFFF;
   }
   
   /* 用户头像 start */
   .logo-image2 {
     width: 45rpx;
     height: 45rpx;
     position: relative;
     overflow: hidden;
     border-radius: 50%;
   }
   
   .logo-pic2 {
     background-size: cover;
     background-repeat: no-repeat;
     // background-attachment:fixed;
     background-position: top;
     border: 1rpx solid #F8F7F8;
     // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
     border-radius: 50%;
     overflow: hidden;
     // background-color: #FFFFFF;
   }
   
/* 页脚 start */
.footer {
  margin-top: 30rpx;
}
/* 页脚 end */
  /* 会员权益 start */
  .member-rights {
    position: relative;
    width: 100%;
    padding: 30rpx 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(-120deg, #3e445a, #31374a, #2b3042, #262b3c);
    margin-top: 60rpx;
    border-radius: 20rpx;

    &::before {
      z-index: -1;
    }

    .member-content {
      position: relative;
      z-index: 3;
      .grade {
        font-family: 'tuniao-xiaowei';
        font-size: 42rpx;
        font-weight: bold;
        background-image: linear-gradient(360deg, #ffe3a3, #feeacc);
      }
      .desc {
        font-size: 26rpx;
        margin-top: 16rpx;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .rights-btn {
      position: relative;
      width: 160rpx;
      border-radius: 1000rpx;
      background-color: #f1c68e;
      color: #634738;
      padding: 14rpx 0;
      z-index: 3;
      font-weight: bold;

      &::before {
        z-index: 1;
      }
      text {
        z-index: inherit;
      }
    }

    /* 图片波浪 start */
    .image-wave-container {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
      border-radius: inherit;

      .image-wave {
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 100%;
        background: url('https://resource.tuniaokj.com/images/wave/wave-2.png');
        background-repeat: repeat no-repeat;
        background-position: 0 bottom;
        animation-name: waveAnimation;
        animation-timing-function: linear;
        animation-iteration-count: infinite;

        &:nth-child(1) {
          opacity: 0.1;
          background-size: 50% 45px;
          animation-duration: 4s;
        }
        &:nth-child(2) {
          opacity: 0.2;
          background-size: 50% 50px;
          animation-duration: 3.5s;
        }
        &:nth-child(3) {
          opacity: 0.3;
          background-size: 50% 35px;
          animation-duration: 2s;
        }
      }
    }
    /* 图片波浪 end */
  }
  /* 会员权益 end */
.style-option{
	opacity: 0.8;
}
@keyframes waveAnimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

  
  .tag-select{
    width: 48%;
    border: 4rpx solid #4327DF;
    margin: 8rpx 1%;
    border-radius: 20rpx;
    background-color: #211E2F50;
  }
  .tag-select-no{
    width: 48%;
    border: 4rpx solid #211E2F;
    margin: 8rpx 1%;
    border-radius: 20rpx;
    background-color: #211E2F;
  }
    
    /* 卡 */
    .button-vip {
      width: 100%;
      height: 300rpx;
      border-radius: 15rpx;
      position: relative;
      z-index: 1;
      
      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
      }    
    }
	
	
	/* 底部操作栏 start */
	.bottom-operation-bar {
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: calc(100% - 60rpx);
	  height: 110rpx;
	  background-color: #211E2F;
	  display: flex;
	  align-items: center;
	  padding: 0rpx 30rpx;
	  box-sizing: content-box;
	  padding-bottom: 20rpx;
	
	  .left {
	    flex-grow: 0;
	    flex-shrink: 0;
	    display: flex;
	
	    .left-btn-item {
	      display: flex;
	      flex-direction: column;
	      align-items: center;
	      color: var(--tn-color-gray);
	      .icon {
	        font-size: 42rpx;
	      }
	      .title {
	        font-size: 28rpx;
	      }
	
	      &.first {
	        margin-right: 60rpx;
	      }
	    }
	  }
	
	  .buy-btn {
	    height: 70%;
	    flex: 1;
	    margin-left: 90rpx;
	    border-radius: 200rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	
	    &::before {
	      z-index: -1;
	    }
	  }
	}
	/* 底部操作栏 end */
.icon5__item--icon{
	width: 142rpx;
	height: 134rpx;
}
.swiper-item-text{
	position: relative;
}
.text-sussuspension{
	width: 80%;
}
.swiper-item-text-tips{
	position: absolute;
	right: 0;
	bottom: 0;
	image{
		width: 200rpx;
		height: 200rpx;
	}
}

  .tn-footerfixed {
    max-width: 100%;
    margin: 0 auto;
    position: fixed;
    width: 100%;
    bottom: calc(40rpx + env(safe-area-inset-bottom));
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
  }
  
  /* 底部操作栏 start */
  .operation-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
	background-color: rgb(229, 238, 255);
	padding: 10rpx;
  
    /* 资讯操作栏 start */
    .news-bar {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0rpx 30rpx 30rpx 30rpx;
  
      .btn-container {
        width: calc(100% / 2 - 30rpx);
        color: #fff;
		padding: 0;
  
        .btn {
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 80rpx;
  
          .icon {
            margin-left: 10rpx;
          }
        }
      }
    }
    /* 资讯操作栏 end */
  }
  /* 底部操作栏 end */

/* 动画 */
.prompt {
	width: 100%;
	height: 120rpx;
	position: fixed;
	bottom: 140px;
}

.prompt text {
	position: absolute;
	bottom: 2px;
	color: #f3a73f;
	left: calc(45%);
	animation: puls 1.5s infinite ease-in-out;
}
.dot {
	height: 16px;
	width: 16px;
	margin-right: 10px;
	border-radius: 10px;
	background-color: #f3a73f;
	animation: pulse 1.5s infinite ease-in-out;
}
.dots-container{
	display: flex;
	justify-content: center;
}
.dot:last-child {
	margin-right: 0;
}

.dot:nth-child(1) {
	animation-delay: -0.3s;
}

.dot:nth-child(2) {
	animation-delay: -0.1s;
}

.dot:nth-child(3) {
	animation-delay: 0.1s;
}

@keyframes pulse {
	0% {
		transform: scale(0.8);
		background-color: #f3a73f;
		box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
	}

	50% {
		transform: scale(1.2);
		background-color: #f9d39f;
		box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
	}

	100% {
		transform: scale(0.8);
		background-color: #f3a73f;
		box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
	}
}